<template>
    <div class="detail" @click="pushRouter">
        <img :src="itemDetail.img" alt="">
        <p>{{itemDetail.name}}</p>
        <div class="numWatch">
            <div>
                <span class="video icon-play2">62.5万</span>
                <span class="comment icon-file-text">{{!itemDetail.commentlen ? '12.8万' : itemDetail.commentlen}}</span>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "detail",
        props:['itemDetail'],
        methods:{
            pushRouter(){
                console.log(this.$route);
                if (this.$route.path != `/article/${this.itemDetail.id}`) {
                    this.$router.push(`/article/${this.itemDetail.id}`)
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .detail{
        background-color: white;
        position: relative;
        height: 34.839vw;
        p{
            font-size: 3.2vw;
            color: #212121;
            margin-top: 1.6vw;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        img{
            width: 100%;
            height: 100%;
        }
        .numWatch{
            position: absolute;
            bottom: 2%;
            width: 92%;
            div{
                background: linear-gradient(0deg,rgba(0,0,0,.85),transparent);
                padding: 0 1.613vw;
                display: flex;
                justify-content: space-between;
                width: 100%;

            }
            span{
                font-size: 4.194vw;
                color: white;
            }
            .video{

            }

        }
    }

</style>